<template>
  <div class="login">
    <div class="left-areas">
      <img src="../assets/register-page.jpg" alt="" />
    </div>
    <div class="right-areas">
      <div class="pictureBox">
        <img src="../assets/green-logo.png" alt="" />
      </div>
      <!-- 下方的表单 -->
      <div>
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <!-- 账号 -->
          <a-form-model-item
            ref="name"
            label="Account"
            prop="name"
            class="lines"
          >
            <a-input
              v-model="form.name"
              @blur="
                () => {
                  $refs.name.onFieldBlur();
                }
              "
            />
          </a-form-model-item>
          <!-- 密码 -->
          <a-form-model-item
            ref="password"
            label="Password"
            prop="password"
            class="lines"
          >
            <a-input-password
              placeholder="input password"
              v-model="form.password"
              @blur="
                () => {
                  $refs.password.onFieldBlur();
                }
              "
            />
          </a-form-model-item>

          <!-- 确认密码 -->

          <a-form-model-item
            ref="again"
            label="again"
            prop="again"
            class="lines"
          >
            <a-input-password
              placeholder="input password"
              v-model="form.again"
              @blur="
                () => {
                  $refs.password.onFieldBlur();
                }
              "
            />
          </a-form-model-item>

          <!-- 提交按钮 -->
          <a-form-model-item class="btns">
            <a-button type="primary" @click="onSubmit" size="large">
              Register
            </a-button>
            <a-button style="margin-left: 10px" @click="goback" size="large">
              Back
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "Login",
  components: {
    // HelloWorld
  },

  data() {
    return {
      form: {
        name: "",
        password: "",
        again: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input password",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
        again: [
          {
            required: true,
            message: "Please input password",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.password !== this.form.passwordTwo) {
            alert("The passwords entered twice are inconsistent");
          } else {
            alert("submit!");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;

  .left-areas {
    width: 50%;
    height: 100vh;
    position: relative;
    // border: 1px solid red;
    img {
      width: 800px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .right-areas {
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top: 5%;
    .pictureBox {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 400px;
      transform: translate(15%, 0);
    }

    // 一行显示
    .lines {
      display: flex !important;
    }

    ::v-deep.ant-form-item-required {
      font-size: 20px;
      display: inline-block;
      width: 200px;
      // border: 1px solid red;
    }
    .ant-input {
      width: 300px !important;
      height: 40px !important;
    }
    .ant-input-password {
      width: 300px;
      height: 40px;
      ::v-deep .ant-input {
        width: 300px !important;
        height: 40px !important;
      }
    }

    // 提交按钮
    ::v-deep.btns {
      box-sizing: border-box;
      padding-left: 30%;

      display: flex;
      justify-content: space-evenly;
      .ant-form-item-children {
        height: auto;
      }

      .ant-btn {
        margin-right: 30px;
      }
    }
  }
}
// 字体大小
</style>
